<template>
  <div class="radio-recommand">
    <div class="radio-recommand-list"
         v-for="(item,index) in  recommand"
         :key="index" @click="itemClick(index)">
      <div class="top">
        <img :src="item.src" alt="">
      </div>
      <div class="font">
        <p>{{item.font}}</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "RadioRecommand",
        data(){
          return{
              recommand:[
                  {font:'电台分类',src:require('../../../assets/img/radio/classify.svg'),path:'/RadioClassification'},
                  {font:'电台排行',src:require('../../../assets/img/radio/rank.svg'),path:'/RadioRank'},
                  {font:'付费精品',src:require('../../../assets/img/radio/crown.svg'),path:'/RadioPayGift'},
                  {font:'主播学院',src:require('../../../assets/img/radio/study.svg'),path:''},
              ]
          }
        },
        methods:{
            itemClick(index){
                if(index != 3){
                    this.$router.push('/radio' + this.recommand[index].path)
                }else{
                    this.$toast.show('该功能尚未开通')
                }

            }
        }
    }
</script>

<style scoped>
  .radio-recommand{
    display: flex;
    margin-top: 10px;
    text-align: center;
  }
  
  .radio-recommand-list{
    flex: 1;
  }

  .top{
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background-color: #FF1D12;
    border-radius: 25px;
  }
  
  .top img{
    width: 25px;
    height: 25px;
    margin: 12px auto 0 auto;
  }
  
  .font{
    margin-top: 10px;
    font-size: 13px;
  }
  
  .font p{
    color: black;
  }
  
  

</style>